element-ui checkbox-button和checkbox-group组件源码学习
看完了checkbox组件的,接下来当然看下checkbox-button和checkbox-group组件的源码。
首先,checkbox-button是和checkbox-group配合使用的。
一、checkbox-button html
html上与checkbox组件比较相像,没有了checkbox前的勾选框,html层级减少了一层。另外就是checkbox的内容显示增加了style为checked的样式,其他方面区别并不大。
二、checkbox-button JS
大部分的方法与checkbox中类似,这儿只列下不同的属性和方法。
activeStyle()
仅有该函数大不相同,作用是给了当checkbox-button被选中时的样式。
三、checkbox-group html
仅仅给checkbox-button增加了个div,控制了样式状态。
四、checkbox-button js部分
name
名称
componentName
组件名称
mixins
混入组件之间通讯组件。
inject
注入elFormItem对象,防止单独组件使用时,报错。
props
- value,当前model值
- disabled,是否禁用
- min,勾选的checkbox的最小数量
- max,勾选的checkbox的最大数量
- size,checkbox-group整体大小
- fill,按钮形式的 Checkbox 激活时的填充色和边框色
- textColor,按钮形式的 Checkbox 激活时的文本颜色
computed
- _elFormItemSize(),formitem大小。
- checkboxGroupSize(),group大小。
watch
- value(value),监听value值,当value变化时,向父级ElFormItem组件触发el.form.change事件。
带注释的源码下载:checkbox-button.vue和checkbox-group.vue。